<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE  html>
<html>

<head>
<meta charset="UTF-8">
<title>员工列表</title>
<!-- 引入样式 -->
<link
	href="${pageContext.request.contextPath}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css"
	rel="stylesheet">
<script
	src="${pageContext.request.contextPath}/static/js/jquery-3.3.1.js"></script>
<script
	src="${pageContext.request.contextPath}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

</head>

<body>
	<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog"
		aria-labelledby="myLargeModalLabel" id="empAddModel">
		<div class="modal-dialog modal-lg" role="document">
			<div class="modal-content">
				<div class="modal-footer">
					<form class="form-horizontal">
						<div class="form-group">
							<label for="inputEmail3" class="col-sm-2 control-label">empName</label>
							<div class="col-sm-10">
								<input type="text"  name="empName" class="form-control" id="empName_add_input"
									placeholder="empName">
							</div>
						</div>
						<div class="form-group">
							<label for="inputPassword3" class="col-sm-2 control-label">email</label>
							<div class="col-sm-10">
								<input type="text" name="email" class="form-control" id="email_add_input" placeholder="email">
							</div>
						</div>
						<div class="form-group">
							<label for="inputPassword3" class="col-sm-2 control-label">gender</label>
							<div class="col-sm-10">
								<label class="radio-inline">
 									 <input type="radio" name="gender" id="gender1_add_btn" value="M"> 男
								</label>
								<label class="radio-inline">
  									<input type="radio" name="gender" id="gender2_add_btn" value="F"> 女
								</label>
							</div>
						</div>
						<div class="form-group">
							<label for="inputPassword3" class="col-sm-2 control-label">deptName</label>
							<select class="form-control" name="dId">
								
							</select>
						</div>

					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
					<button type="button" class="btn btn-primary">添加</button>
				</div>
			</div>
		</div>
	</div>


	<div class="container">
		<!--
        	作者：offline
        	时间：2019-03-01
        	描述：标题
        -->
		<div class="row">
			<div class="col-md-12">
				<h1>SSM-CRUD</h1>
			</div>

		</div>
		<!--
        	作者：offline
        	时间：2019-03-01
        	描述：
        -->
		<div class="row">
			<div class="col-md-4 col-md-offset-8">
				<button class="btn btn-info" id="emp_add_modal_btn">新增</button>

				<button class="btn btn-danger">删除</button>
			</div>
		</div>
		<div class="row">
			<div class="col-md-12">
				<table class="table" id="emps_table">
					<thead>
						<tr>
							<th>#</th>
							<th>empName</th>
							<th>gender</th>
							<th>email</th>
							<th>deptName</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>

					</tbody>
				</table>
			</div>

		</div>
		<div class="row">
			<div class="col-md-6" id="page_info"></div>
			<div class="col-md-6">
				<nav aria-label="Page navigation">
					<ul class="pagination">

					</ul>
				</nav>
			</div>
		</div>
	</div>
	<script type="text/javascript">
		$(function() {
			getResult(1);
		});

		function getResult(pn) {
			$.ajax({
				url : "${pageContext.request.contextPath}/emps",
				data : "pn=" + pn,
				type : "GET",
				success : function(result) {
					bulid_emps_table(result);
					build_page_info(result);
					build_page_nav(result);
					console.log(result);
				},
				dataType : "json"
			});
		};

		function bulid_emps_table(result) {
			var emps = result.extend.pageInfo.list;
			$("#emps_table tbody").empty();
			$.each(emps, function(index, item) {
				var empIdTb = $("<td></td>").append(item.empId);
				var empNameTb = $("<td></td>").append(item.empName);
				var genderTb = $("<td></td>").append(
						item.gender == "M" ? "男" : "女");
				var emailTb = $("<td></td>").append(item.email);
				var deptNameTb = $("<td></td>")
						.append(item.department.deptName);

				var editBtn = $("<button></button>").addClass(
						"btn btn-info btn-sm").append("<span></span>")
						.addClass("glyphicon glyphicon-pencil").append("编辑");
				var deltaBtn = $("<button></button>").addClass(
						"btn btn-danger btn-sm").append("<span></span>")
						.addClass("glyphicon glyphicon-remove-sign").append(
								"删除");
				var btnTb = $("<td></td>").append(editBtn).append(" ").append(
						deltaBtn);
				$("<tr></tr>").append(empIdTb).append(empNameTb).append(
						genderTb).append(emailTb).append(deptNameTb).append(
						btnTb).appendTo("#emps_table tbody");

			});

		}

		function build_page_info(result) {
			$("#page_info").empty();
			$("#page_info").append(
					"当前页:" + result.extend.pageInfo.pageNum + "  总页数:"
							+ result.extend.pageInfo.pages);
		}

		function build_page_nav(result) {
			$(".pagination").empty();
			var homePagebtn = $("<li></li>").append(
					$("<a></a>").append("首页").attr("href",
							"javascript:void(0);"));
			;
			var endPagebtn;
			var previousPage = $("<li></li>").append(
					$("<a></a>").append($("<span></span>").append("&laquo;")));
			if (result.extend.pageInfo.isFirstPage) {
				homePagebtn.addClass("disabled");
				previousPage.addClass("disabled");
			} else {
				homePagebtn.click(function() {
					getResult(1);
				});

				previousPage.click(function() {
					getResult(result.extend.pageInfo.prePage);
				});
			}
			$(".pagination").append(homePagebtn).append(previousPage);
			var navigatepageNums = result.extend.pageInfo.navigatepageNums;

			$.each(navigatepageNums, function(index, nums) {
				var page = $("<li></li>").append(
						$("<a></a>").append(nums).attr("href",
								"javascript:void(0);"));
				if (nums == result.extend.pageInfo.pageNum) {
					page.addClass("active");
				}
				page.click(function() {
					getResult(nums);
				});
				$(".pagination").append(page);
			});

			var nextPagebtn = $("<li></li>").append(
					$("<a></a>").append($("<span></span>").append("&raquo;")));

			endPagebtn = $("<li></li>").append(
					$("<a></a>").append("尾页").attr("href",
							"javascript:void(0);"));
			if (result.extend.pageInfo.isLastPage) {
				endPagebtn.addClass("disabled");
				nextPagebtn.addClass("disabled");
			} else {
				endPagebtn.click(function() {
					getResult(result.extend.pageInfo.pages);
				});
				nextPagebtn.click(function() {
					getResult(result.extend.pageInfo.nextPage);
				});
			}
			$(".pagination").append(nextPagebtn).append(endPagebtn);
		}
		
		$("#emp_add_modal_btn").click(function(){
			
			$("#empAddModel").modal({
				backdrop:"static"
			});
		});
		
		
	</script>
</body>

</html>